import Taro from '@tarojs/taro'
import React, { PureComponent } from 'react'
// 界面组件
import { View, Text, Button, Swiper, SwiperItem } from '@tarojs/components'
import { AtSearchBar, AtList, AtListItem, AtAccordion, AtTabs, AtTabsPane } from 'taro-ui'
import CTopbar from '../../components/CTopBar/index'
import GetTopBarInfo from '@/utils/GetTopBarInfo' //动态高度
import CHomeMoreCard from '../../components/CHomeMoreCard/index'
import { get_course_left_list, get_course_right_data } from './service'
import './index.scss'

/**
//  * 课程列表
 */

type ITabList = {
  courseTypeName: string
  id: number
}
type IRightData = {
  courseImg: string
  courseName: string
  courseSubtitle: string
  gmtCreate: string
  id: number
  price: number
}
type I = {
  id: number
  value: string
  open: boolean
  current: number
  selectName: string
  selectId: number
  tabList: ITabList[]
  right_data: IRightData[]
  pageSize: number
  pageNum: number
}

interface ExcellentCourse {
  state: I
}
class ExcellentCourse extends PureComponent<any> {
  constructor(props) {
    super(props)
    this.state = {
      id: 0,
      value: '',
      open: false,
      current: 0,
      selectName: '按时间',
      selectId: 1,
      tabList: [],
      right_data: [],
      pageSize: 10,
      pageNum: 1,
    }
  }
  // 输入框监听事件
  onChange(value) {
    this.setState({
      value: value,
    })
  }
  // 输入框 按钮事件
  // onActionClick() {
  //   console.log('开始搜索')
  // }
  // 下拉选择触发事件
  handleClick(value) {
    this.setState({
      open: value,
    })
  }
  // 点击左侧tab触发事件
  handleTagItemClick(value) {
    const id = this.state.tabList[value].id

    this.setState(
      {
        id,
        current: value,
      },
      () => {
        this.right_list()
      },
    )
  }
  // 跳转

  toCourseDetail(id, title) {
    Taro.navigateTo({
      url: '/pages/College/CourseDetails/index?id=' + id + '&title=' + title,
    })
  }
  // 渲染前钩子 请求数据
  //WARNING! To be deprecated in React v17. Use componentDidMount instead.
  componentWillMount() {
    this.left_list()
    this.right_list()
  }
  // 左边tab数据
  left_list() {
    get_course_left_list().then(({ result, data, message }: any) => {
      if (result < 0) {
        Taro.showToast({
          title: message,
          icon: 'none',
          duration: 2000,
        })
        return
      }
      const arr: any = []
      arr.push({
        title: '全部',
        id: 0,
      })
      data.map((itm, idx) => {
        arr.push({
          title: itm.courseTypeName,
          id: itm.id,
        })
      })
      this.setState({
        tabList: arr,
      })
    })
  }
  // 右边卡片数据
  right_list() {
    const { id, pageNum, pageSize, selectId, right_data } = this.state

    const params = {
      id,
      pageNum,
      pageSize,
      type: selectId,
    }
    get_course_right_data(params).then(({ result, data, message }) => {
      this.setState({
        right_data: data,
      })
    })
  }
  onReachBottom() {
    console.log('触底了')

    const { pageNum } = this.state
    this.setState(
      {
        pageNum: pageNum + 1,
      },
      () => {
        this.right_list()
      },
    )
  }

  render() {
    const { tabList, current, right_data } = this.state
    const selectList = ['按时间', '按热度', '按价格']
    return (
      <View style={{ paddingTop: `${GetTopBarInfo().TopBarHeight}px` }}>
        <View className='header'>
          <CTopbar title='课程分类' showBack></CTopbar>
        </View>
        <View className='colleg'>
          {/* <View>
            <AtSearchBar
              actionName='搜索'
              placeholder='请输入测试名称或关键字'
              value={this.state.value}
              onChange={this.onChange.bind(this)}
              onActionClick={this.onActionClick.bind(this)}
            />
          </View> */}
          <View className='selectorWrap'>
            <View className='selector'>
              <AtAccordion open={this.state.open} onClick={this.handleClick.bind(this)} title={this.state.selectName} isAnimation={false}>
                <AtList hasBorder={false}>
                  {selectList.map((c, i) => {
                    return (
                      <AtListItem
                        key={i}
                        title={c}
                        onClick={() => {
                          this.setState(
                            {
                              selectId: i + 1,
                              selectName: c,
                              open: false,
                            },
                            () => this.right_list(),
                          )
                        }}
                      />
                    )
                  })}
                </AtList>
              </AtAccordion>
            </View>
          </View>
          <View
            className='content'
            onClick={() => {
              this.setState({
                open: false,
              })
            }}
          >
            <AtTabs
              current={this.state.current}
              scroll
              tabDirection='vertical'
              tabList={tabList}
              onClick={this.handleTagItemClick.bind(this)}
            >
              {tabList.map((item, index) => {
                return (
                  <AtTabsPane tabDirection='vertical' current={current} index={item.id} key={index}>
                    {right_data !== [] && right_data.length > 0 ? (
                      right_data.map((c, i) => {
                        return (
                          <View key={i} onClick={this.toCourseDetail.bind(this, c.id, c.courseName)}>
                            <CHomeMoreCard
                              img={c.courseImg}
                              title={c.courseName}
                              subTitle={c.courseSubtitle}
                              price={c.price}
                              personNum={c.number}
                              type={2}
                            />
                            {/* type 1:测试卷  2课程 */}
                          </View>
                        )
                      })
                    ) : (
                      <View className='not_found'>暂无数据</View>
                    )}
                  </AtTabsPane>
                )
              })}
            </AtTabs>
          </View>
        </View>
      </View>
    )
  }
}

export default ExcellentCourse
